<template>
    <div class="statistics-page">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>打卡统计</span>
            </div>
            <div v-if="statisticsData.length > 0" class="statistics">
                <el-table
                        :data="statisticsData"
                        stripe
                        style="width: 100%"
                        :header-cell-style="{ background: '#f0f9eb', color: '#67c23a' }"
                >
                    <el-table-column
                            prop="userId"
                            label="用户ID"
                            width="200"
                    ></el-table-column>
                    <el-table-column
                            prop="userName"
                            label="用户名"
                            width="200"
                    ></el-table-column>
                    <el-table-column
                            prop="month"
                            label="月份"
                            width="200"
                    ></el-table-column>
                    <el-table-column
                            prop="workPunches"
                            label="上班打卡次数"
                            width="200"
                    ></el-table-column>
                    <el-table-column
                            prop="offPunches"
                            label="下班打卡次数"
                            width="200"
                    ></el-table-column>
                    <el-table-column
                            prop="totalPunches"
                            label="总打卡次数"
                            width="200"
                    ></el-table-column>
                </el-table>
            </div>
            <div v-else class="no-data">
                <el-empty description="暂无数据"></el-empty>
            </div>
        </el-card>
        <!--分页区-->
        <div class="block" style="margin:20px 0 0 15px ;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="tablePage.pageNum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="tablePage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { getMonthlyStatistics } from "@/api/Sign";

    export default {
        data() {
            return {
                statisticsData: [],
                tablePage: {
                    pageNum: 1,//当前页
                    pageSize: 10,//每页条数
                },
                total: 0,

            };
        },
        methods: {
            getMonthlyStatistics() {
                getMonthlyStatistics().then(res => {
                    if (res.data.code === 200) {
                        this.statisticsData = res.data.data;
                    } else {
                        this.$message.error('获取统计数据失败');
                    }
                }).catch(err => {
                    this.$message.error('获取统计数据失败');
                });
            },
            handleSizeChange(pageSize) {
                this.tablePage.pageSize = pageSize
                this.getMonthlyStatistics()//刷新数据
            },
            handleCurrentChange(currentPage) {
                this.tablePage.pageNum = currentPage
                this.getMonthlyStatistics()//刷新数据
            },
        },
        mounted() {
            this.getMonthlyStatistics()
        }
    };
</script>

<style scoped>
    .statistics-page {
        padding: 20px;
        background-color: #f0f2f5;
        min-height: 100vh;
    }

    .box-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .clearfix {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .no-data {
        text-align: center;
        padding: 20px;
    }
</style>